<template>
  <el-dialog
    v-model="dialogVisible"
    :title="isEdit ? '编辑客户申请' : '新增客户申请'"
    width="1000px"
    @close="handleClose"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="120px"
    >
      <!-- 基本信息 -->
      <el-card class="form-section" shadow="never">
        <template #header>
          <div class="section-title">
            <el-icon><User /></el-icon>
            基本信息
          </div>
        </template>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户名称" prop="customerName">
              <el-input v-model="form.customerName" placeholder="请输入客户名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="contactPerson">
              <el-input v-model="form.contactPerson" placeholder="请输入联系人" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="行业" prop="industry">
              <el-input v-model="form.industry" placeholder="请输入行业" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="备注" prop="remarks">
          <el-input
            v-model="form.remarks"
            type="textarea"
            :rows="2"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-card>

      <!-- 收货信息 -->
      <el-card class="form-section" shadow="never">
        <template #header>
          <div class="section-title">
            <el-icon><Location /></el-icon>
            收货信息
          </div>
        </template>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="收货人姓名" prop="deliveryName">
              <el-input v-model="form.deliveryName" placeholder="请输入收货人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货人电话" prop="deliveryPhone">
              <el-input v-model="form.deliveryPhone" placeholder="请输入收货人电话" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="省份" prop="province">
              <el-input v-model="form.province" placeholder="请输入省份" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="城市" prop="city">
              <el-input v-model="form.city" placeholder="请输入城市" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="区县" prop="district">
              <el-input v-model="form.district" placeholder="请输入区县" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="收货地址" prop="deliveryAddress">
          <el-input
            v-model="form.deliveryAddress"
            type="textarea"
            :rows="2"
            placeholder="请输入详细收货地址"
          />
        </el-form-item>
      </el-card>

      <!-- 开票信息 -->
      <el-card class="form-section" shadow="never">
        <template #header>
          <div class="section-title">
            <el-icon><Document /></el-icon>
            开票信息
          </div>
        </template>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="发票抬头" prop="invoiceTitle">
              <el-input v-model="form.invoiceTitle" placeholder="请输入发票抬头" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="税号" prop="taxNumber">
              <el-input v-model="form.taxNumber" placeholder="请输入税号" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="开户银行" prop="bankName">
              <el-input v-model="form.bankName" placeholder="请输入开户银行" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行账号" prop="bankAccount">
              <el-input v-model="form.bankAccount" placeholder="请输入银行账号" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- 订货单位信息 -->
      <el-card class="form-section" shadow="never">
        <template #header>
          <div class="section-title">
            <el-icon><OfficeBuilding /></el-icon>
            订货单位信息
          </div>
        </template>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="订货单位名称" prop="orderUnitName">
              <el-input v-model="form.orderUnitName" placeholder="请输入订货单位名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地址" prop="address">
              <el-input v-model="form.address" placeholder="请输入地址" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系人" prop="orderContactPerson">
              <el-input v-model="form.orderContactPerson" placeholder="请输入联系人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="orderPhone">
              <el-input v-model="form.orderPhone" placeholder="请输入电话" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" :loading="loading" @click="handleSubmit">
          {{ isEdit ? '更新' : '创建' }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { ref, reactive, watch, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { User, Location, Document, OfficeBuilding } from '@element-plus/icons-vue'
import { createCustomerApplication, updateCustomerApplication } from '../../api/customer.js'

export default {
  name: 'CustomerApplicationForm',
  components: {
    User, Location, Document, OfficeBuilding
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    customer: {
      type: Object,
      default: null
    }
  },
  emits: ['update:visible', 'success'],
  setup(props, { emit }) {
    const formRef = ref()
    const loading = ref(false)
    
    const form = reactive({
      id: null,
      customerName: '',
      contactPerson: '',
      phone: '',
      email: '',
      industry: '',
      remarks: '',
      deliveryName: '',
      deliveryPhone: '',
      deliveryAddress: '',
      province: '',
      city: '',
      district: '',
      invoiceTitle: '',
      taxNumber: '',
      bankName: '',
      bankAccount: '',
      orderUnitName: '',
      address: '',
      orderContactPerson: '',
      orderPhone: ''
    })
    
    const rules = {
      customerName: [
        { required: true, message: '请输入客户名称', trigger: 'blur' }
      ],
      contactPerson: [
        { required: true, message: '请输入联系人', trigger: 'blur' }
      ],
      phone: [
        { required: true, message: '请输入联系电话', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
      ],
      email: [
        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
      ]
    }
    
    const isEdit = computed(() => !!props.customer?.id)
    const dialogVisible = computed(() => props.visible)
    
    // 监听对话框显示状态
    watch(() => props.visible, (visible) => {
      if (visible) {
        resetForm()
        if (props.customer) {
          Object.assign(form, props.customer)
        }
      }
    })
    
    // 重置表单
    const resetForm = () => {
      Object.assign(form, {
        id: null,
        customerName: '',
        contactPerson: '',
        phone: '',
        email: '',
        industry: '',
        remarks: '',
        deliveryName: '',
        deliveryPhone: '',
        deliveryAddress: '',
        province: '',
        city: '',
        district: '',
        invoiceTitle: '',
        taxNumber: '',
        bankName: '',
        bankAccount: '',
        orderUnitName: '',
        address: '',
        orderContactPerson: '',
        orderPhone: ''
      })
      if (formRef.value) {
        formRef.value.clearValidate()
      }
    }
    
    // 关闭对话框
    const handleClose = () => {
      emit('update:visible', false)
    }
    
    // 提交表单
    const handleSubmit = async () => {
      if (!formRef.value) return
      
      try {
        const valid = await formRef.value.validate()
        if (!valid) return
        
        loading.value = true
        
        if (isEdit.value) {
          await updateCustomerApplication(form.id, form)
          ElMessage.success('客户申请更新成功')
        } else {
          await createCustomerApplication(form)
          ElMessage.success('客户申请创建成功')
        }
        
        emit('success')
        handleClose()
      } catch (error) {
        console.error('提交客户申请失败:', error)
        ElMessage.error('提交客户申请失败')
      } finally {
        loading.value = false
      }
    }
    
    return {
      formRef,
      form,
      rules,
      loading,
      isEdit,
      dialogVisible,
      handleClose,
      handleSubmit
    }
  }
}
</script>

<style scoped>
.form-section {
  margin-bottom: 20px;
}

.section-title {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: #303133;
}

.section-title .el-icon {
  margin-right: 8px;
  color: #409EFF;
}

.dialog-footer {
  text-align: right;
}
</style>
